<template>
  <div class="contact-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">联系我们</h1>
          <p class="page-description">
            我们随时准备为您提供专业的服务和支持，期待与您的合作
          </p>
        </div>
      </div>
    </section>

    <!-- 联系方式 -->
    <section class="contact-info">
      <div class="container">
        <div class="info-grid">
          <div class="info-card">
            <div class="card-icon">
              <el-icon><Phone /></el-icon>
            </div>
            <div class="card-content">
              <h3 class="card-title">电话咨询</h3>
              <p class="card-description">专业客服团队为您提供即时支持</p>
              <div class="contact-details">
                <div class="detail-item">
                  <span class="detail-label">销售热线：</span>
                  <span class="detail-value">400-123-4567</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">技术支持：</span>
                  <span class="detail-value">400-123-4568</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">服务时间：</span>
                  <span class="detail-value">工作日 9:00-18:00</span>
                </div>
              </div>
            </div>
          </div>

          <div class="info-card">
            <div class="card-icon">
              <el-icon><Message /></el-icon>
            </div>
            <div class="card-content">
              <h3 class="card-title">邮件联系</h3>
              <p class="card-description">发送邮件获得详细的书面回复</p>
              <div class="contact-details">
                <div class="detail-item">
                  <span class="detail-label">商务合作：</span>
                  <span class="detail-value">business@ikeysoft.cn</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">技术支持：</span>
                  <span class="detail-value">support@ikeysoft.cn</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">媒体合作：</span>
                  <span class="detail-value">media@ikeysoft.cn</span>
                </div>
              </div>
            </div>
          </div>

          <div class="info-card">
            <div class="card-icon">
              <el-icon><Location /></el-icon>
            </div>
            <div class="card-content">
              <h3 class="card-title">办公地址</h3>
              <p class="card-description">欢迎预约到访，面对面深入交流</p>
              <div class="contact-details">
                <div class="detail-item">
                  <span class="detail-label">总部地址：</span>
                  <span class="detail-value">北京市朝阳区建国门外大街1号</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">邮政编码：</span>
                  <span class="detail-value">100022</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">交通指引：</span>
                  <span class="detail-value">地铁1号线建国门站A出口</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <section class="contact-form-section">
      <div class="container">
        <div class="form-layout">
          <div class="form-header">
            <h2 class="section-title">在线咨询</h2>
            <p class="section-description">
              填写下方表单，我们将在24小时内与您取得联系
            </p>
          </div>

          <div class="form-content">
            <el-form 
              :model="contactForm" 
              :rules="formRules" 
              ref="contactFormRef" 
              label-width="100px"
              class="contact-form"
            >
              <div class="form-row">
                <el-form-item label="姓名" prop="name" class="form-item">
                  <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
                </el-form-item>
                <el-form-item label="公司" prop="company" class="form-item">
                  <el-input v-model="contactForm.company" placeholder="请输入公司名称" />
                </el-form-item>
              </div>

              <div class="form-row">
                <el-form-item label="手机号" prop="phone" class="form-item">
                  <el-input v-model="contactForm.phone" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email" class="form-item">
                  <el-input v-model="contactForm.email" placeholder="请输入邮箱地址" />
                </el-form-item>
              </div>

              <div class="form-row">
                <el-form-item label="咨询类型" prop="type" class="form-item">
                  <el-select v-model="contactForm.type" placeholder="请选择咨询类型">
                    <el-option label="产品咨询" value="product" />
                    <el-option label="技术支持" value="technical" />
                    <el-option label="商务合作" value="business" />
                    <el-option label="售后服务" value="service" />
                    <el-option label="其他" value="other" />
                  </el-select>
                </el-form-item>
                <el-form-item label="预算范围" prop="budget" class="form-item">
                  <el-select v-model="contactForm.budget" placeholder="请选择预算范围">
                    <el-option label="10万以下" value="under-10w" />
                    <el-option label="10-50万" value="10w-50w" />
                    <el-option label="50-100万" value="50w-100w" />
                    <el-option label="100万以上" value="over-100w" />
                    <el-option label="暂不确定" value="uncertain" />
                  </el-select>
                </el-form-item>
              </div>

              <el-form-item label="详细需求" prop="message">
                <el-input 
                  v-model="contactForm.message" 
                  type="textarea" 
                  :rows="4" 
                  placeholder="请详细描述您的需求或问题，我们将为您提供专业的解决方案"
                />
              </el-form-item>

              <el-form-item label="附件上传">
                <el-upload
                  class="upload-demo"
                  drag
                  action="#"
                  multiple
                  :auto-upload="false"
                  :file-list="contactForm.attachments"
                  :on-change="handleFileChange"
                >
                  <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      支持上传需求文档、产品资料等，文件大小不超过10MB
                    </div>
                  </template>
                </el-upload>
              </el-form-item>

              <el-form-item>
                <div class="form-actions">
                  <el-button @click="resetForm">重置</el-button>
                  <el-button type="primary" @click="submitForm" :loading="submitting">
                    提交咨询
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <!-- 地图位置 -->
    <section class="map-section">
      <div class="container">
        <div class="map-header">
          <h2 class="section-title">办公位置</h2>
          <p class="section-description">
            我们位于北京CBD核心区域，交通便利，欢迎预约到访
          </p>
        </div>
        <div class="map-container">
          <div class="map-placeholder">
            <div class="map-content">
              <el-icon class="map-icon"><Location /></el-icon>
              <h3 class="map-title">北京市朝阳区建国门外大街1号</h3>
              <p class="map-description">国贸中心，地铁1号线建国门站A出口步行5分钟</p>
              <div class="map-actions">
                <el-button type="primary" @click="openMap">
                  <el-icon><Position /></el-icon>
                  查看地图
                </el-button>
                <el-button @click="copyAddress">
                  <el-icon><CopyDocument /></el-icon>
                  复制地址
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="team-section">
      <div class="container">
        <div class="team-header">
          <h2 class="section-title">联系团队</h2>
          <p class="section-description">
            专业的团队成员随时为您提供优质服务
          </p>
        </div>
        <div class="team-grid">
          <div class="team-member" v-for="member in teamMembers" :key="member.id">
            <div class="member-avatar">
              <el-avatar :size="80" :src="member.avatar">{{ member.name.charAt(0) }}</el-avatar>
            </div>
            <div class="member-info">
              <h3 class="member-name">{{ member.name }}</h3>
              <p class="member-title">{{ member.title }}</p>
              <p class="member-description">{{ member.description }}</p>
              <div class="member-contact">
                <el-button text @click="contactMember(member.email)">
                  <el-icon><Message /></el-icon>
                  {{ member.email }}
                </el-button>
                <el-button text v-if="member.phone" @click="callMember(member.phone)">
                  <el-icon><Phone /></el-icon>
                  {{ member.phone }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ快速解答 -->
    <section class="quick-faq">
      <div class="container">
        <div class="faq-header">
          <h2 class="section-title">常见问题</h2>
          <p class="section-description">
            在联系我们之前，您可以先查看这些常见问题的解答
          </p>
        </div>
        <div class="faq-list">
          <div class="faq-item" v-for="faq in quickFAQs" :key="faq.id">
            <div class="faq-question" @click="toggleFAQ(faq.id)">
              <h3 class="question-text">{{ faq.question }}</h3>
              <el-icon class="question-icon" :class="{ 'rotated': expandedFAQs.includes(faq.id) }">
                <ArrowDown />
              </el-icon>
            </div>
            <el-collapse-transition>
              <div v-show="expandedFAQs.includes(faq.id)" class="faq-answer">
                <p class="answer-text">{{ faq.answer }}</p>
              </div>
            </el-collapse-transition>
          </div>
        </div>
        <div class="faq-actions">
          <el-button type="primary" @click="goToFAQ">
            查看更多FAQ
          </el-button>
          <el-button @click="goToService">
            在线客服
          </el-button>
        </div>
      </div>
    </section>

    <!-- 社交媒体 -->
    <section class="social-section">
      <div class="container">
        <div class="social-content">
          <h2 class="section-title">关注我们</h2>
          <p class="section-description">
            通过社交媒体获取最新产品动态和行业资讯
          </p>
          <div class="social-links">
            <div class="social-item" v-for="social in socialLinks" :key="social.id">
              <div class="social-icon">
                <el-icon><component :is="social.icon" /></el-icon>
              </div>
              <div class="social-info">
                <h3 class="social-name">{{ social.name }}</h3>
                <p class="social-description">{{ social.description }}</p>
                <el-button text type="primary" @click="openSocial(social.url)">
                  关注我们
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  Phone,
  Message,
  Location,
  UploadFilled,
  Position,
  CopyDocument,
  ArrowDown,
  ChatDotRound,
  Platform
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadFile } from 'element-plus'

const router = useRouter()
const contactFormRef = ref<FormInstance>()
const submitting = ref(false)
const expandedFAQs = ref<number[]>([])

// 联系表单
const contactForm = reactive({
  name: '',
  company: '',
  phone: '',
  email: '',
  type: '',
  budget: '',
  message: '',
  attachments: [] as UploadFile[]
})

// 表单验证规则
const formRules: FormRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择咨询类型', trigger: 'change' }
  ],
  message: [
    { required: true, message: '请输入详细需求', trigger: 'blur' },
    { min: 10, message: '需求描述至少10个字符', trigger: 'blur' }
  ]
}

// 团队成员
const teamMembers = [
  {
    id: 1,
    name: '张经理',
    title: '销售总监',
    description: '10年企业软件销售经验，专注于为客户提供最适合的解决方案',
    email: 'zhang.manager@ikeysoft.cn',
    phone: '138-0013-0001',
    avatar: '/avatar-sales.png'
  },
  {
    id: 2,
    name: '李工程师',
    title: '技术总监',
    description: '15年软件开发经验，负责产品技术架构和客户技术支持',
    email: 'li.engineer@ikeysoft.cn',
    phone: '138-0013-0002',
    avatar: '/avatar-tech.png'
  },
  {
    id: 3,
    name: '王顾问',
    title: '解决方案专家',
    description: '专业的行业解决方案顾问，帮助客户实现数字化转型',
    email: 'wang.consultant@ikeysoft.cn',
    phone: '138-0013-0003',
    avatar: '/avatar-consultant.png'
  }
]

// 快速FAQ
const quickFAQs = [
  {
    id: 1,
    question: '如何获取产品试用？',
    answer: '您可以通过官网注册免费试用账号，或联系我们的销售团队为您开通专业版试用。试用期为30天，包含完整功能。'
  },
  {
    id: 2,
    question: '产品部署需要多长时间？',
    answer: '标准部署通常需要1-2周时间，包括环境准备、系统安装、数据迁移和用户培训。定制化项目根据需求复杂度确定时间。'
  },
  {
    id: 3,
    question: '是否提供技术培训？',
    answer: '我们提供完整的技术培训服务，包括管理员培训、最终用户培训和开发者培训。支持现场培训和在线培训两种方式。'
  },
  {
    id: 4,
    question: '售后服务包含哪些内容？',
    answer: '售后服务包括7x24小时技术支持、系统维护、版本升级、故障处理等。不同服务等级提供不同的响应时间保证。'
  }
]

// 社交媒体链接
const socialLinks = [
  {
    id: 1,
    name: '微信公众号',
    description: '获取产品更新和行业资讯',
    icon: 'ChatDotRound',
    url: '#'
  },
  {
    id: 2,
    name: '官方微博',
    description: '关注我们的最新动态',
    icon: 'Platform',
    url: '#'
  },
  {
    id: 3,
    name: 'LinkedIn',
    description: '连接专业商务网络',
    icon: 'Platform',
    url: '#'
  }
]

// 方法
const handleFileChange = (file: UploadFile) => {
  contactForm.attachments.push(file)
}

const submitForm = async () => {
  if (!contactFormRef.value) return
  
  try {
    await contactFormRef.value.validate()
    submitting.value = true
    
    // 模拟提交
    setTimeout(() => {
      submitting.value = false
      ElMessage.success('咨询提交成功！我们将在24小时内与您联系。')
      resetForm()
    }, 2000)
  } catch (error) {
    ElMessage.error('请检查表单信息是否完整')
  }
}

const resetForm = () => {
  if (!contactFormRef.value) return
  contactFormRef.value.resetFields()
  contactForm.attachments = []
}

const openMap = () => {
  // 打开地图应用
  const address = '北京市朝阳区建国门外大街1号'
  const url = `https://uri.amap.com/marker?position=116.434307,39.902486&name=IKeySoft&src=ikeysoft&coordinate=gaode&callnative=0`
  window.open(url, '_blank')
}

const copyAddress = async () => {
  const address = '北京市朝阳区建国门外大街1号'
  try {
    await navigator.clipboard.writeText(address)
    ElMessage.success('地址已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

const contactMember = (email: string) => {
  window.location.href = `mailto:${email}`
}

const callMember = (phone: string) => {
  window.location.href = `tel:${phone}`
}

const toggleFAQ = (faqId: number) => {
  const index = expandedFAQs.value.indexOf(faqId)
  if (index > -1) {
    expandedFAQs.value.splice(index, 1)
  } else {
    expandedFAQs.value.push(faqId)
  }
}

const goToFAQ = () => {
  router.push('/service#faq')
}

const goToService = () => {
  router.push('/service#chat')
}

const openSocial = (url: string) => {
  if (url === '#') {
    ElMessage.info('敬请期待')
  } else {
    window.open(url, '_blank')
  }
}
</script>

<style scoped>
.contact-page {
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 8rem 0 4rem;
  color: white;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 联系信息 */
.contact-info {
  padding: 6rem 0;
  background: white;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.info-card {
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.info-card:hover {
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: #333;
}

.card-description {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.contact-details {
  text-align: left;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  color: #666;
  font-weight: 500;
}

.detail-value {
  color: #333;
  font-weight: 600;
}

/* 联系表单 */
.contact-form-section {
  padding: 6rem 0;
  background: #f8fafc;
}

.form-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.section-description {
  font-size: 1.1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.form-content {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 3rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form {
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1rem;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* 地图位置 */
.map-section {
  padding: 6rem 0;
  background: white;
}

.map-header {
  text-align: center;
  margin-bottom: 3rem;
}

.map-container {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.map-placeholder {
  height: 400px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-content {
  text-align: center;
  color: #666;
}

.map-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.map-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.map-description {
  margin-bottom: 1.5rem;
  color: #666;
}

.map-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 团队介绍 */
.team-section {
  padding: 6rem 0;
  background: #f8fafc;
}

.team-header {
  text-align: center;
  margin-bottom: 3rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.team-member {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.member-avatar {
  margin-bottom: 1.5rem;
}

.member-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.member-title {
  color: #667eea;
  font-weight: 500;
  margin-bottom: 1rem;
}

.member-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.member-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 快速FAQ */
.quick-faq {
  padding: 6rem 0;
  background: white;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: #f8fafc;
}

.question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.question-icon {
  transition: transform 0.3s ease;
  color: #667eea;
}

.question-icon.rotated {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.answer-text {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.faq-actions {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 社交媒体 */
.social-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.social-content {
  text-align: center;
}

.social-section .section-title {
  color: white;
  margin-bottom: 1rem;
}

.social-section .section-description {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.social-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
}

.social-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.social-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.social-description {
  opacity: 0.9;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .social-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .form-content {
    padding: 2rem 1.5rem;
  }

  .map-placeholder {
    height: 300px;
  }

  .map-actions {
    flex-direction: column;
    align-items: center;
  }

  .faq-actions {
    flex-direction: column;
    align-items: center;
  }

  .member-contact {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .contact-info,
  .contact-form-section,
  .map-section,
  .team-section,
  .quick-faq,
  .social-section {
    padding: 3rem 0;
  }

  .info-card {
    padding: 1.5rem;
  }

  .form-content {
    padding: 1.5rem 1rem;
  }

  .team-member {
    padding: 1.5rem;
  }

  .social-item {
    padding: 1.5rem;
  }
}
</style>